<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现鼠标滑动选项卡DEMO</title>
		<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
		<style type="text/css">
			#box_1 {
				width: 500px;
				background-color: antiquewhite;
				float: left;
			}

			#box_1 a {
				color: #000;
				text-decoration: none;
			}

			#box_1 .check_title_box {
				width: 100%;
				height: 60px;
				background-color: aliceblue;
				float: left;
			}

			#box_1 .check_title {
				text-align: center;
				width: 150px;
				height: 60px;
				line-height: 60px;
				float: left;
			}

			#box_1 .check_title_box .checked {
				text-align: center;
				width: 150px;
				height: 60px;
				background-color: brown;
				font-weight: bold;
			}

			#box_1 .check_title_box .checked a {
				color: #F0F8FF;
			}

			#box_1 .check_title_box .check_title_more {
				font-size: 12px;
				line-height: 60px;
				float: right;
				margin-right: 20px;
			}

			#box_1 .check_content_box {
				width: 100%;
				float: left;
			}

			#box_1 .check_content_line_box {
				margin: 20px;
			}

			#box_1 .check_content_box .hide_content_box {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box_1">
			<div class="check_title_box">
				<div class="check_title checked">
					<a href="javascript:void();"><span class="fa fa-skyatlas"></span><span>选项一</span></a>
				</div>
				<div class="check_title">
					<a href="javascript:void();"><span class="fa fa-skyatlas"></span><span>选项二</span></a>
				</div>
				<div class="check_title_more">
					MORE
				</div>
			</div>
			<div class="check_content_box">
				<div class="check_content_line_box">
					选项一
				</div>
				<div class="check_content_line_box hide_content_box">
					选项二
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var showBox = function(id) {
			$('#' + id).find('.check_title').mouseover(function() {
				var num = $(this).index();
				$('#' + id).find(".check_title:eq(" + num + ")").addClass('checked').siblings(".check_title")
					.removeClass('checked');
				$('#' + id).find(".check_content_line_box:eq(" + num + ")").show().siblings(
					".check_content_line_box").hide();
				//$('#'+id).find(".check_content_line_box:eq("+num+")").removeClass('hide_content_box').siblings(".check_content_line_box").addClass('hide_content_box');
			});
		}

		showBox('box_1');
	</script>
</html>
